<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>生产与UAT环境镜像对比</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <style>
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container-fluid {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0;
            height: 100%;
        }

        .header-section {
            background: linear-gradient(135deg, #2c3e50, #3498db);
            color: white;
            padding: 1.5rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .filter-section {
            background: #f8f9fa;
            padding: 1rem 2rem;
            border-bottom: 1px solid #dee2e6;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .content-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .table-container {
            flex: 1;
            overflow: auto;
            padding: 0 2rem;
        }

        .table {
            margin-bottom: 0;
            font-size: 0.9rem;
        }

        .table thead th {
            background: #343a40;
            color: white !important;
            position: sticky;
            top: 0;
            z-index: 10;
            padding: 12px 8px;
            font-weight: 600;
        }

        .table td {
            padding: 10px 8px;
            vertical-align: middle;
            max-width: 300px;
            word-wrap: break-word;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }

        .env-diff {
            background-color: #fff3cd !important;
        }

        .not-found {
            background-color: #f8d7da !important;
        }

        .status-badge {
            font-size: 0.85rem;
            padding: 0.4em 0.8em;
        }

        .footer-section {
            background: #f8f9fa;
            padding: 1rem 2rem;
            border-top: 1px solid #dee2e6;
            margin-top: auto;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 0.75rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 0.5rem;
        }

        .search-box {
            max-width: 300px;
        }

        .filter-btn {
            min-width: 80px;
            margin: 2px;
        }

        .filter-active {
            background-color: #007bff !important;
            color: white !important;
            border-color: #007bff !important;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
        }

        /* 固定第一列 */
        .table-container thead th:first-child,
        .table-container tbody td:first-child {
            position: sticky;
            left: 0;
            background: inherit;
            z-index: 5;
        }

        .table-container thead th:first-child {
            background: #343a40;
            z-index: 11;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-section, .filter-section, .footer-section {
                padding: 1rem;
            }

            .table-container {
                padding: 0 1rem;
            }

            .table {
                font-size: 0.8rem;
            }

            .search-box {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 头部 -->
        <div class="header-section">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-1">生产环境 vs UAT环境 镜像对比</h2>
                    <small class="opacity-75">实时监控生产与UAT环境部署状态</small>
                </div>
                <div class="col-md-4 text-end">
                    <div class="btn-group">
                        <a href="{{ url_for('metrics') }}" class="btn btn-outline-light btn-sm" target="_blank">
                            API数据
                        </a>
                        <button class="btn btn-outline-light btn-sm" onclick="refreshData()">
                            刷新数据
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 过滤区域 -->
        <div class="filter-section">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="input-group search-box">
                        <span class="input-group-text">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索Deployment名称..."
                               value="{{ search_query if search_query else '' }}">
                        <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex flex-wrap align-items-center justify-content-end">
                        <span class="me-2 fw-bold">状态过滤:</span>
                        <div class="btn-group" role="group">
                            <a href="{{ url_for('index', status='all', search=search_query) }}"
                               class="btn filter-btn btn-sm btn-outline-primary {{ 'filter-active' if status_filter == 'all' else '' }}"
                               onclick="showLoading()">全部</a>
                            <a href="{{ url_for('index', status='match', search=search_query) }}"
                               class="btn filter-btn btn-sm btn-outline-success {{ 'filter-active' if status_filter == 'match' else '' }}"
                               onclick="showLoading()">一致</a>
                            <a href="{{ url_for('index', status='diff', search=search_query) }}"
                               class="btn filter-btn btn-sm btn-outline-warning {{ 'filter-active' if status_filter == 'diff' else '' }}"
                               onclick="showLoading()">不一致</a>
                            <a href="{{ url_for('index', status='not_found', search=search_query) }}"
                               class="btn filter-btn btn-sm btn-outline-danger {{ 'filter-active' if status_filter == 'not_found' else '' }}"
                               onclick="showLoading()">未找到</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-section">
            {% if data %}
            <div class="table-container">
                <table class="table table-bordered table-hover table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>服务名称</th>
                            <th>生产环境镜像</th>
                            <th>创建时间</th>
                            <th>UAT环境镜像</th>
                            <th>创建时间</th>
                            <th>镜像状态</th>
                        </tr>
                    </thead>
                    <tbody id="dataTableBody">
                        {% for d in data %}
                        <tr class="{{ 'env-diff' if d.status == 'diff' else 'not-found' if d.status == 'not_found' else '' }}">
                            <td><strong>{{ d.name }}</strong></td>
                            <td>{{ d.images_prod }}</td>
                            <td>{{ d.runtime_prod }}</td>
                            <td>{{ d.images_uat }}</td>
                            <td>{{ d.runtime_uat }}</td>
                            <td>
                                {% if d.status == 'match' %}
                                    <span class="badge bg-success status-badge">一致</span>
                                {% elif d.status == 'diff' %}
                                    <span class="badge bg-warning text-dark status-badge">不一致</span>
                                {% else %}
                                    <span class="badge bg-danger status-badge">未找到</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
                <div class="text-center">
                    <p class="text-danger fs-5">未找到任何 deployment 数据</p>
                    <button class="btn btn-primary mt-2" onclick="refreshData()">重新加载</button>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- 底部信息 -->
        <div class="footer-section">
            <div class="row">
                <div class="col-md-4">
                    <div class="stat-card">
                        <strong>连接状态</strong><br>
                        <span class="badge bg-{{ 'success' if prom_prod_status == '连接正常' else 'danger' }}">
                            生产: {{ prom_prod_status }}
                        </span>
                        <span class="badge bg-{{ 'success' if prom_216_status == '连接正常' else 'danger' }}">
                            UAT: {{ prom_216_status }}
                        </span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card">
                        <strong>统计信息</strong><br>
                        总计: <span id="totalCount">{{ total_count }}</span> 个 |
                        一致: <span class="text-success fw-bold" id="matchCount">{{ match_count }}</span> |
                        不一致: <span class="text-warning fw-bold" id="diffCount">{{ diff_count }}</span> |
                        未找到: <span class="text-danger fw-bold" id="notFoundCount">{{ not_found_count }}</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card text-end">
                        <strong>最后更新:</strong> {{ update_time }}<br>
                        <small class="text-muted">命名空间: {{ PROD_NAMESPACE }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div id="loadingOverlay" class="loading-overlay d-none">
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">数据加载中，请稍候...</p>
        </div>
    </div>

    <script>
        // 显示加载遮罩
        function showLoading() {
            document.getElementById('loadingOverlay').classList.remove('d-none');
        }

        // 刷新数据
        function refreshData() {
            showLoading();
            window.location.reload();
        }

        // 页面加载完成后隐藏加载提示
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('loadingOverlay').classList.add('d-none');
            initializeTable();
        });

        // 初始化表格
        function initializeTable() {
            const allRows = Array.from(document.querySelectorAll('#dataTableBody tr'));
            window.allTableData = allRows.map(row => ({
                element: row,
                name: row.querySelector('td:first-child strong').textContent.toLowerCase(),
                status: row.querySelector('td:last-child .badge').textContent
            }));

            updateStatistics(allRows);

            // 自动调整表格列宽
            autoAdjustColumns();
        }

        // 搜索功能
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            filterTable(searchValue);
        });

        // 过滤表格
        function filterTable(searchValue) {
            const rows = document.querySelectorAll('#dataTableBody tr');
            let visibleCount = 0;
            let matchCount = 0;
            let diffCount = 0;
            let notFoundCount = 0;

            rows.forEach(row => {
                const deploymentName = row.querySelector('td:first-child strong').textContent.toLowerCase();
                const statusBadge = row.querySelector('td:last-child .badge');
                const status = statusBadge ? statusBadge.textContent : '';

                if (deploymentName.includes(searchValue)) {
                    row.style.display = '';
                    visibleCount++;

                    if (status === '一致') matchCount++;
                    else if (status === '不一致') diffCount++;
                    else if (status === '未找到') notFoundCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            updateCounts(visibleCount, matchCount, diffCount, notFoundCount);
        }

        // 更新统计数字
        function updateCounts(total, match, diff, notFound) {
            document.getElementById('totalCount').textContent = total;
            document.getElementById('matchCount').textContent = match;
            document.getElementById('diffCount').textContent = diff;
            document.getElementById('notFoundCount').textContent = notFound;
        }

        // 更新统计信息
        function updateStatistics(rows) {
            let matchCount = 0;
            let diffCount = 0;
            let notFoundCount = 0;

            rows.forEach(row => {
                const statusBadge = row.querySelector('td:last-child .badge');
                if (statusBadge) {
                    const status = statusBadge.textContent;
                    if (status === '一致') matchCount++;
                    else if (status === '不一致') diffCount++;
                    else if (status === '未找到') notFoundCount++;
                }
            });

            updateCounts(rows.length, matchCount, diffCount, notFoundCount);
        }

        // 清除搜索
        function clearSearch() {
            const searchInput = document.getElementById('searchInput');
            searchInput.value = '';
            filterTable('');

            // 恢复原始统计
            updateCounts({{ total_count }}, {{ match_count }}, {{ diff_count }}, {{ not_found_count }});
        }

        // 自动调整列宽
        function autoAdjustColumns() {
            const table = document.querySelector('.table');
            const headers = table.querySelectorAll('thead th');

            headers.forEach((header, index) => {
                const cells = table.querySelectorAll(`tbody td:nth-child(${index + 1})`);
                let maxWidth = header.offsetWidth;

                cells.forEach(cell => {
                    maxWidth = Math.max(maxWidth, cell.offsetWidth);
                });

                header.style.minWidth = maxWidth + 'px';
                cells.forEach(cell => {
                    cell.style.minWidth = maxWidth + 'px';
                });
            });
        }

        // URL参数处理
        window.addEventListener('load', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const searchParam = urlParams.get('search');
            if (searchParam) {
                document.getElementById('searchInput').value = searchParam;
                filterTable(searchParam.toLowerCase());
            }
        });
    </script>
</body>
</html>